<template>
  <view class="container">
    <view
        class="card"
        v-for="(card, index) in cards"
        :key="index"
        :class="card.color"
        @click="navigateTo(card.page)"
    >
      <view class="card-title">{{ card.title }}</view>
      <view class="card-description">{{ card.description }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cards: [
        { title: '数学课后资料-人教版', description: '在线课后资料，六个年级十二册', page: 'card1', color: 'card-yellow' },
        { title: '数学课后资料-北师版', description: '六个年级十二册，六个年级十二册', page: 'card2', color: 'card-blue' },
        { title: '乘法表', description: '九九乘法表', page: 'card3', color: 'card-green' },
        { title: '乘法表', description: '乘法表算式练习，快速掌握乘法表', page: 'card4', color: 'card-red' }
      ]
    };
  },
  methods: {
    navigateTo(page) {
      uni.navigateTo({
        url: `/pages/tabs/learn/${page}/index`
      });
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f0f0f0;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.card {
  color: white;
  width: 80%;
  min-width: 600rpx;
  height: 80px;
  margin: 30px;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.card:hover {
  transform: scale(1.05);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
}

.card-title {
  font-size: 24px; /* 设置较大的字体大小 */
  font-weight: bold; /* 加粗 */
}

.card-description {
  font-size: 14px; /* 设置较小的字体大小 */
  margin-top: 5px; /* 添加一些间距 */
}

.card-yellow {
  background: linear-gradient(135deg, #F5A623, #FFD700);
}

.card-blue {
  background: linear-gradient(135deg, #4A90E2, #87CEEB);
}

.card-green {
  background: linear-gradient(135deg, #4CAF50, #8FBC8F);
}

.card-red {
  background: linear-gradient(135deg, #FF5733, #FF6347);
}
</style>